<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <button id="addMenu" class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加一级菜单 </button>
        </div>
        <div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table" style="margin: 0px;"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-xs" lay-event="addChild">添加子级</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="icon">
    <!--<span style="color: #F581B1;">{{ d.icon }}</span>-->
    <i class="{{ d.icon }}"></i>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加一级菜单 </button>
    </div>
</script>



<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'treeTable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treeTable = layui.treeTable;


        var parentNodeText = '无';
        var parentNodeId = 0;

        // 渲染表格
        var menuTreeTable = treeTable.render({
            elem: '#munu-table',
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                isPidData: false  // 是否是pid形式数据
            },
            //data: data,  // 数据
            tree: {
                iconIndex: 1  // 折叠图标显示在第几列
            },
            cols: [
                //{type: 'numbers'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'title', title: '菜单名称'},
                {field: 'code', title: '菜单编号'},
                {field: 'url', title: '菜单url'},
                {field: 'icon', title: '菜单图标', templet:'#icon'},
                {field: 'sequence',  align: 'center', title: '序号',width:70},
                {templet: '#auth-state', align: 'center', title: '操作'}
            ],
            reqData: function(data, callback) {
                // 在这里写ajax请求，通过callback方法回调数据
                $.get('../../menu/tree', function (data) {
                    callback(data);  // 参数是数组类型
                });
            }
        });

        function addMenu(){
            var selectData = menuTreeTable.checkStatus();  // 获取选中数据(是否是半选会有一个isIndeterminate字段标识)
            //console.log(selectData);
            //menuTreeTable.setChecked([29]);


            var index = layer.open({
                title: '添加菜单',
                type: 2,
                shade: 0.2,
                shadeClose: true,
                area: ['500px', '500px'],
                content: 'menu-add.html',
                success: function (layero, index) {
                    // 得到iframe页的窗口对象
                    var iframeWindow = $("div.layui-layer-content > iframe", layero)[0].contentWindow;
                    iframeWindow.parentNodeText = parentNodeText;
                    iframeWindow.parentNodeId = parentNodeId;
                    iframeWindow.menuTreeTable = menuTreeTable;
                }
            });
        }

        $("#addMenu").click(function (){
            parentNodeText = '无';
            parentNodeId = 0;
            addMenu();
        });

        //监听工具条
        treeTable.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if(layEvent === 'addChild'){
                parentNodeText = data.title;
                parentNodeId = data.id;
                addMenu();
            } else if (layEvent === 'del') {
                layer.confirm('确定删除数据？', {
                    icon:0
                }, function (index) {
                    var id = data.id;
                    $.post('../../menu/remove',{id:id},function(data){
                        layer.msg('删除成功');
                        menuTreeTable.reload();
                    },'json');

                    layer.close(index);
                });
            } else if (layEvent === 'edit') {
                var index = layer.open({
                    title: '修改菜单',
                    type: 2,
                    shade: 0.2,
                    shadeClose: true,
                    area: ['500px', '500px'],
                    content: 'menu-edit.html',
                    success: function (layero, index) {
                        // 得到iframe页的窗口对象
                        var iframeWindow = $("div.layui-layer-content > iframe", layero)[0].contentWindow;
                        console.log(data);
                        iframeWindow.rowData = JSON.stringify(data);
                        iframeWindow.parentNodeText = data.parentTitle;
                        iframeWindow.parentNodeId = data.parentId;
                        iframeWindow.menuTreeTable = menuTreeTable;
                    }
                });
            }
        });
    });
</script>
</body>
</html>